<template>
  <van-goods-action v-show="!showBottomAction">
    <van-goods-action-icon />
    <van-goods-action-icon />
    <van-goods-action-button
      :text="$t('chat')"
      type="info"
      @click="chatting"
    ></van-goods-action-button>
    <van-goods-action-button
      type="primary"
      :text="$t('take')"
      @click="errand"
    ></van-goods-action-button>
  </van-goods-action>
</template>

<script>
import { GoodsAction, GoodsActionButton, GoodsActionIcon } from 'vant';
import { mapState } from 'vuex';
import 'vant/lib/goods-action/style/less';
import 'vant/lib/goods-action-button/style/less';
import 'vant/lib/goods-action-icon/style/less';

export default {
    name: 'detail_footer',
    props: {
        order: {
            type: Object,
            required: true
        }
    },
    data () {
        return {
            showBottomAction: undefined
        };
    },
    components: {
        [GoodsAction.name]: GoodsAction,
        [GoodsActionButton.name]: GoodsActionButton,
        [GoodsActionIcon.name]: GoodsActionIcon
    },
    methods: {
        errand: function () {
            // 先判断用户是否登录了
            if (!this.isLogin) {
                this.$router.replace({ name: 'login' });
            } else {
                const orderPromise = this.$api.orderApi.detail(this.order._id);
                orderPromise.then(({ data: { isOrderTaked } }) => {
                    if (isOrderTaked) {
                        const error = this.$t('orders.assignFailure');
                        Promise.reject(error);
                    }
                }).then(() => {
                    const updateInfo = {
                        _id: this.order._id,
                        isOrderTaked: true,
                        orderStatus: 2
                    };
                    return this.$api.orderApi.update(updateInfo);
                }).then(() => {
                    const applyData = {
                        applyOrder: this.order._id,
                        applyUser: this.userInfo._id
                    };
                    return this.$api.applyApi.post(applyData);
                }).then(applyResult => {
                    if (JSON.stringify(applyResult.data) === '{}') {
                        const error = this.$t('orders.applyInfoCreateFailed');
                        Promise.reject(error);
                    } else {
                        this.$util.successToast(this.$t('orders.assignOrder'));
                        setTimeout(() => {
                            this.$router.push({ name: 'transactionDetail' });
                        }, 1500);
                    }
                }).catch(error => {
                    this.$util.failToast(error.message || error);
                });
            }
        },
        chatting () {
            if (this.isLogin) {
                this.$router.push({
                    name: 'msg-detail',
                    params: {
                        orderId: this.order._id,
                        chatId: this.order.orderByCreateID
                    }
                });
            } else {
                this.$router.replace({ name: 'login' });
            }
        }
    },
    computed: {
        ...mapState(['userInfo', 'isLogin'])
    },
    watch: {
        userInfo: {
            handler (value) {
                this.showBottomAction = Object.is(this.order.orderByCreateID, value._id);
            },
            immediate: true
        }
    }
};
</script>

<style scoped lang="less">
.van-goods-action /deep/ {
  box-shadow: 0px -2px 6px 0px rgba(213, 213, 214, 0.7);
}
</style>
